<template>
  <div class="page-container min-h-screen bg-gray-100">
    <!-- Header -->
    <header class="header sticky top-0 z-10 bg-white shadow-sm p-4 text-center font-bold text-lg">
      我的订单
    </header>

    <div class="pb-20 px-4">
      <!-- Unpaid Orders Section -->
      <div class="py-3" v-if="unpaidOrders.length > 0">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">未支付订单：</h3>

        <div class="space-y-4">
          <div
              v-for="order in unpaidOrders"
              :key="order.id"
              class="bg-white rounded-lg shadow-sm overflow-hidden"
          >
            <!-- Order Header -->
            <div
                @click="toggleOrderDetails(order.id)"
                class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors"
            >
              <div class="flex items-center space-x-2">
                <span class="font-medium text-gray-800">{{ order.businessName }}</span>
                <i
                    class="fas fa-caret-down text-gray-500 transition-transform duration-200"
                    :class="{ 'rotate-180': order.showDetails }"
                ></i>
              </div>
              <div class="flex items-center space-x-4">
                <span class="text-lg font-bold text-red-500">¥{{ order.totalAmount.toFixed(2) }}</span>
                <button
                    @click.stop="goToPayment(order.id)"
                    class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
                >
                  去支付
                </button>
              </div>
            </div>

            <!-- Order Details -->
            <transition name="slide">
              <div
                  v-if="order.showDetails"
                  class="border-t border-gray-100 bg-gray-50"
              >
                <div
                    v-for="item in order.items"
                    :key="item.id"
                    class="flex items-center justify-between px-4 py-3 border-b border-gray-100 last:border-b-0"
                >
                  <span class="text-gray-700">{{ item.name }} × {{ item.quantity }}</span>
                  <span class="text-gray-800 font-medium">¥{{ item.price.toFixed(2) }}</span>
                </div>
                <div class="flex items-center justify-between px-4 py-3 text-gray-600">
                  <span>配送费</span>
                  <span>¥{{ order.deliveryFee.toFixed(2) }}</span>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- Paid Orders Section -->
      <div class="py-3" v-if="paidOrders.length > 0">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">已支付订单：</h3>

        <div class="space-y-4">
          <div
              v-for="order in paidOrders"
              :key="order.id"
              class="bg-white rounded-lg shadow-sm overflow-hidden"
          >
            <!-- Order Header -->
            <div
                @click="toggleOrderDetails(order.id)"
                class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors"
            >
              <div class="flex items-center space-x-2">
                <span class="font-medium text-gray-800">{{ order.businessName }}</span>
                <i
                    class="fas fa-caret-down text-gray-500 transition-transform duration-200"
                    :class="{ 'rotate-180': order.showDetails }"
                ></i>
              </div>
              <div class="flex items-center space-x-4">
                <span class="text-lg font-bold text-green-600">¥{{ order.totalAmount.toFixed(2) }}</span>
                <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-medium">
                  已支付
                </span>
              </div>
            </div>

            <!-- Order Details -->
            <transition name="slide">
              <div
                  v-if="order.showDetails"
                  class="border-t border-gray-100 bg-gray-50"
              >
                <div
                    v-for="item in order.items"
                    :key="item.id"
                    class="flex items-center justify-between px-4 py-3 border-b border-gray-100 last:border-b-0"
                >
                  <span class="text-gray-700">{{ item.name }} × {{ item.quantity }}</span>
                  <span class="text-gray-800 font-medium">¥{{ item.price.toFixed(2) }}</span>
                </div>
                <div class="flex items-center justify-between px-4 py-3 text-gray-600">
                  <span>配送费</span>
                  <span>¥{{ order.deliveryFee.toFixed(2) }}</span>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div v-if="unpaidOrders.length === 0 && paidOrders.length === 0" class="text-center py-10">
        <i class="fas fa-box-open text-4xl text-gray-300 mb-4"></i>
        <p class="text-gray-500">暂无订单记录</p>
      </div>
    </div>

    <!-- Footer Navigation -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

const router = useRouter()

interface OrderItem {
  id: number
  name: string
  quantity: number
  price: number
}

interface Order {
  id: number
  businessName: string
  totalAmount: number
  deliveryFee: number
  items: OrderItem[]
  showDetails: boolean
}

const unpaidOrders = ref<Order[]>([
  {
    id: 1,
    businessName: '万家饺子（软件园E18店）',
    totalAmount: 49,
    deliveryFee: 3,
    showDetails: false,
    items: [
      { id: 1, name: '纯肉鲜肉水饺', quantity: 2, price: 18 },
      { id: 2, name: '玉米鲜肉水饺', quantity: 1, price: 20 }
    ]
  },
  {
    id: 2,
    businessName: '小锅饭豆腐馆（全运店）',
    totalAmount: 61,
    deliveryFee: 3,
    showDetails: false,
    items: [
      { id: 1, name: '小锅米线', quantity: 2, price: 10 },
      { id: 2, name: '铜锅油焖鸡', quantity: 1, price: 38 }
    ]
  }
])

const paidOrders = ref<Order[]>([
  {
    id: 3,
    businessName: '万家饺子（软件园E18店）',
    totalAmount: 49,
    deliveryFee: 3,
    showDetails: false,
    items: [
      { id: 1, name: '纯肉鲜肉水饺', quantity: 2, price: 18 },
      { id: 2, name: '玉米鲜肉水饺', quantity: 1, price: 20 }
    ]
  },
  {
    id: 4,
    businessName: '小锅饭豆腐馆（全运店）',
    totalAmount: 61,
    deliveryFee: 3,
    showDetails: false,
    items: [
      { id: 1, name: '小锅米线', quantity: 2, price: 10 },
      { id: 2, name: '铜锅油焖鸡', quantity: 1, price: 38 }
    ]
  }
])

const toggleOrderDetails = (orderId: number) => {
  // Toggle details for unpaid orders
  const unpaidOrder = unpaidOrders.value.find(order => order.id === orderId)
  if (unpaidOrder) {
    unpaidOrder.showDetails = !unpaidOrder.showDetails
    return
  }

  // Toggle details for paid orders
  const paidOrder = paidOrders.value.find(order => order.id === orderId)
  if (paidOrder) {
    paidOrder.showDetails = !paidOrder.showDetails
  }
}

const goToPayment = (orderId: number) => {
  router.push(`/payment?orderId=${orderId}`)
}
</script>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.rotate-180 {
  transform: rotate(180deg);
}
</style>